<template>
  <div>
    <div class="tdchange">
      <el-tooltip
        class="item"
        effect="dark"
        content="点击切换二维"
        placement="top-start"
      >
        <div
          :class="show ? 'd2_active' : ''"
          class="tdchange-item d2"
          @click="tdhandle('2d')"
        ></div>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="点击切换三维"
        placement="top-start"
      >
        <div
          :class="!show ? 'd3_active' : ''"
          class="tdchange-item d3"
          @click="tdhandle('3d')"
        ></div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import map from "../../assets/map";
export default {
  name: "tdchange",
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    tdhandle(type) {
      type === "2d" ? this.bmshowOrfalse(true) : this.bmshowOrfalse(false);
    },
    bmshowOrfalse(flag) {
      if (flag) {
        let obj = {
          type: "flyto",
          value: [
            121.47195256243225, 31.212515733095135, 7200.661023152289,
            0.7069592104294848, -82.16850114390174, 0.01576241651204144, 0.5,
          ],
        };
        map.setView(tedp.webGis, obj);
      } else {
          map.reductView(tedp.webGis)
      }
      this.show = flag;
      for (let i = 0; i < map.bmdata.length; i++) {
        let enyt = map.bmdata[i];
        for (let j = 0; j < enyt.primitive.length; j++) {
          let primitive = enyt.primitive[j];
          primitive.show = !flag;
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tdchange {
  width: 200px;
  height: 85px;
  position: absolute;
  top: 950px;
  left: 2350px;
  z-index: 999;
  cursor: pointer;
}
.tdchange-item {
  display: inline-block;
  width: 75px;
  height: 70px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 20px;
}
.d2 {
  background-image: url("~@/assets/image/map/map2d.png");
}
.d3 {
  background-image: url("~@/assets/image/map/map3d.png");
}
.d2_active {
  background-image: url("~@/assets/image/map/map2d_active.png");
}
.d3_active {
  background-image: url("~@/assets/image/map/map3d_active.png");
}
</style>
 